﻿<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/documentation.js"></script>
    <meta name="keywords" content="jQuery, jqxRibbon Help Documentation" />
    <title>jqxRibbon API Documentation</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
    <div id="properties">
        <h2 class="documentation-top-header">
            Properties</h2>
        <table class="documentation-table">
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Type
                </th>
                <th>
                    Default
                </th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span1'>width</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the ribbon's width.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>width</code> property.
                        </p>
                        <pre><code>$("#jqxRibbon").jqxRibbon({ width: 500 });</code></pre>
                        <p>
                            Get the <code>width</code> property.
                        </p>
                        <pre><code>var width = $('#jqxRibbon').jqxRibbon('width');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5xu2ogya/">width
                                is set to 500</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span2'>height</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    100
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the ribbon's height.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>height</code> property.
                        </p>
                        <pre><code>$("#jqxRibbon").jqxRibbon({ height: 120 });</code></pre>
                        <p>
                            Get the <code>height</code> property.
                        </p>
                        <pre><code>var height = $('#jqxRibbon').jqxRibbon('height');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5ap5cc4u/">height
                                is set to 100</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span63'>theme</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    ''
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the widget's theme.
                        </p>
                        jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The
                        base stylesheet creates the styles related to the widget's layout like margin, padding,
                        border-width, position. The second css file applies the widget's colors and backgrounds.
                        The jqx.base.css should be included before the second CSS file. In order to set
                        a theme, you need to do the following:
                        <ul>
                            <li>Include the theme's CSS file after jqx.base.css.<br />
                                The following code example adds the 'energyblue' theme.
                                <pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.base.css&quot;type=&quot;text/css&quot;/&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.energyblue.css&quot; type=&quot;text/css&quot; /&gt;</code></pre>
                            </li>
                            <li>Set the widget's theme property to 'energyblue' when you initialize it.
                                <pre><code>$('#jqxRibbon').jqxRibbon({ theme: 'energyblue' });</code></pre>
                            </li>
                        </ul>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/5xu2ogya/">theme
                                is set to 'energyblue'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span4'>mode</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    'default'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the ribbon's display mode.
                        </p>
                        <h4>
                            Possible values:</h4>
                        <p>
                            "default" - the ribbon's content is included in its height.
                        </p>
                        <p>
                            "popup" - the ribbon's content is <em>not</em> included in its height and is positioned
                            absolutely. It overlaps elements underneath it.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>mode</code> property.
                        </p>
                        <pre><code>$("#jqxRibbon").jqxRibbon({ mode: 'popup' });</code></pre>
                        <p>
                            Get the <code>mode</code> property.
                        </p>
                        <pre><code>var mode = $('#jqxRibbon').jqxRibbon('mode');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/qfm5ksLg/">mode
                                is set to 'popup'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span32'>popupCloseMode</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    'click'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the way to close selected content sections when the <code>mode</code>
                            property is set to "popup".
                        </p>
                        <h4>
                            Possible values:</h4>
                        <p>
                            "click"
                        </p>
                        <p>
                            "mouseLeave"
                        </p>
                        <p>
                            "none"
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>popupCloseMode</code> property.
                        </p>
                        <pre><code>$("#jqxRibbon").jqxRibbon({ popupCloseMode: 'mouseLeave' });</code></pre>
                        <p>
                            Get the <code>popupCloseMode</code> property.
                        </p>
                        <pre><code>var popupCloseMode = $('#jqxRibbon').jqxRibbon('popupCloseMode');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/djbnac1q/">popupCloseMode
                                is set to 'mouseLeave'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span5'>position</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    'top'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets whether the ribbon's header is positioned at the top, bottom, left
                            or right of the content.
                        </p>
                        <h4>
                            Possible values:</h4>
                        <p>
                            "top"
                        </p>
                        <p>
                            "bottom"
                        </p>
                        <p>
                            "left"
                        </p>
                        <p>
                            "right"
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>position</code> property.
                        </p>
                        <pre><code>$("#jqxRibbon").jqxRibbon({ position: "left" });</code></pre>
                        <p>
                            Get the <code>position</code> property.
                        </p>
                        <pre><code>var position = $('#jqxRibbon').jqxRibbon('position');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/t8c4mgkp/">position
                                is set to "left"</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span6'>selectedIndex</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    0
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the selected index (tab).
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>selectedIndex</code> property.
                        </p>
                        <pre><code>$("#jqxRibbon").jqxRibbon({ selectedIndex: 0 });</code></pre>
                        <p>
                            Get the <code>selectedIndex</code> property.
                        </p>
                        <pre><code>var selectedIndex = $('#jqxRibbon').jqxRibbon('selectedIndex');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/nf3fat52/">selectedIndex
                                is set to 2</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span8'>selectionMode</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    'click'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the selection mode.
                        </p>
                        <h4>
                            Possible values:</h4>
                        <p>
                            "click"
                        </p>
                        <p>
                            "hover"
                        </p>
                        <p>
                            "none"
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>selectionMode</code> property.
                        </p>
                        <pre><code>$("#jqxRibbon").jqxRibbon({ selectionMode: 'hover' });</code></pre>
                        <p>
                            Get the <code>selectionMode</code> property.
                        </p>
                        <pre><code>var selectionMode = $('#jqxRibbon').jqxRibbon('selectionMode');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tj23wh3h/">selectionMode
                                is set to 'hover'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span10'>animationType</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    'fade'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the animation type.
                        </p>
                        <h4>
                            Possible values:</h4>
                        <p>
                            "fade"
                        </p>
                        <p>
                            "slide"
                        </p>
                        <p>
                            "none"
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>animationType</code> property.
                        </p>
                        <pre><code>$("#jqxRibbon").jqxRibbon({ animationType: 'slide' });</code></pre>
                        <p>
                            Get the <code>animationType</code> property.
                        </p>
                        <pre><code>var animationType = $('#jqxRibbon').jqxRibbon('animationType');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/o520jym7/">animationType
                                is set to 'slide'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span11'>animationDelay</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>
                    400
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the duration of the ribbon animation.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>animationDelay</code> property.
                        </p>
                        <pre><code>$("#jqxRibbon").jqxRibbon({ animationDelay: 400 });</code></pre>
                        <p>
                            Get the <code>animationDelay</code> property.
                        </p>
                        <pre><code>var animationDelay = $('#jqxRibbon').jqxRibbon('animationDelay');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4Lyqqwfr/">animationDelay
                                is set to 800</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span12'>scrollPosition</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>
                    'both'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the position of the scrollbar buttons.
                        </p>
                        <h4>
                            Possible values:</h4>
                        <p>
                            "both"
                        </p>
                        <p>
                            "near"
                        </p>
                        <p>
                            "far"
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>scrollPosition</code> property.
                        </p>
                        <pre><code>$("#jqxRibbon").jqxRibbon({ scrollPosition: 'near' });</code></pre>
                        <p>
                            Get the <code>scrollPosition</code> property.
                        </p>
                        <pre><code>var scrollPosition = $('#jqxRibbon').jqxRibbon('scrollPosition');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ksodo0r9/">scrollPosition
                                is set to 'near'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span30'>scrollStep</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    10
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the scroll step.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>scrollStep</code> property.
                        </p>
                        <pre><code>$("#jqxRibbon").jqxRibbon({ scrollStep: 20 });</code></pre>
                        <p>
                            Get the <code>scrollStep</code> property.
                        </p>
                        <pre><code>var scrollStep = $('#jqxRibbon').jqxRibbon('scrollStep');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/bxs8oxwu/">scrollStep
                                is set to 20</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span31'>scrollDelay</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>
                    50
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the scroll delay.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>scrollDelay</code> property.
                        </p>
                        <pre><code>$("#jqxRibbon").jqxRibbon({ scrollDelay: 100 });</code></pre>
                        <p>
                            Get the <code>scrollDelay</code> property.
                        </p>
                        <pre><code>var scrollDelay = $('#jqxRibbon').jqxRibbon('scrollDelay');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kheu2s0e/">scrollDelay
                                is set to 100</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span13'>disabled</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables/disables the ribbon.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>disabled</code> property.
                        </p>
                        <pre><code>$("#jqxRibbon").jqxRibbon({ disabled: false });</code></pre>
                        <p>
                            Get the <code>disabled</code> property.
                        </p>
                        <pre><code>var disabled = $('#jqxRibbon').jqxRibbon('disabled');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pvdt8uha/">disabled
                                is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span14'>rtl</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>
                    false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets a value indicating whether widget's elements are aligned to support
                            locales using right-to-left fonts.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>rtl</code> property.
                        </p>
                        <pre><code>$("#jqxRibbon").jqxRibbon({ rtl: false});</code></pre>
                        <p>
                            Get the <code>rtl</code> property.
                        </p>
                        <pre><code>var rtl = $('#jqxRibbon').jqxRibbon('rtl');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/2ndpo7t9/">rtl
                                is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span15'>initContent</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>
                    null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Initializes the content of jqxRibbon. Useful for initializing other widgets.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Set the <code>initContent</code> function.
                        </p>
                        <pre><code>$("#jqxRibbon").jqxRibbon({ initContent: function (index) {
    if (index == 0) {
        $("#jqxButton").jqxButton();
    }
});</code></pre>
                        <p>
                            Get the <code>initContent</code> function.
                        </p>
                        <pre><code>var initContent = $('#jqxRibbon').jqxRibbon('initContent');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/23tgzcmx/">initContent
                                is set to a custom function</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Events</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span27'>select</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the user selects an item.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>select</code> event by type: jqxRibbon.
                        </p>
                        <pre><code>$('#jqxRibbon').on('select', function () { // Some code here. }); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/67tgabyu/">Bind
                                to the select event by type: jqxRibbon.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span3'>unselect</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the user unselects an item.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>unselect</code> event by type: jqxRibbon.
                        </p>
                        <pre><code>$('#jqxRibbon').on('unselect', function () { // Some code here. }); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9rjscrqo/">Bind
                                to the unselect event by type: jqxRibbon.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span7'>change</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the user selects or unselects an item.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Bind to the <code>change</code> event by type: jqxRibbon.
                        </p>
                        <pre><code>$('#jqxRibbon').on('change', function () { // Some code here. }); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mzLoj4e5/">Bind
                                to the change event by type: jqxRibbon.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">
                        Methods</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span9'>render</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Renders the jqxRibbon widget.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>render</code> method.
                        </p>
                        <pre><code>$('#jqxRibbon').jqxRibbon('render'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mmurm8ho/">renders
                                the jqxRibbon</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span19'>refresh</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Refreshes the jqxRibbon widget.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>refresh</code> method.
                        </p>
                        <pre><code>$('#jqxRibbon').jqxRibbon('refresh'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/e3vf11g5/">refreshes
                                the jqxRibbon</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span20'>val</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the selected index. Index is a number.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>val</code> method.
                        </p>
                        <p>
                            //Get the selected index.<br />
                            //@param index - Number
                        </p>
                        <pre><code>var index = $("#jqxRibbon").jqxRibbon('val'); </code></pre>
                        <p>
                            //Get the index using jQuery's val()
                        </p>
                        <pre><code>var index = $("#jqxRibbon").val(); </code></pre>
                        <p>
                            //Set the selected index.
                        </p>
                        <pre><code>$("#jqxRibbon").jqxRibbon('val', 3); </code></pre>
                        <p>
                            //Set index using jQuery's val().
                        </p>
                        <pre><code>$("#jqxRibbon").val(3); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/p9aruxuu/">sets
                                or gets the selected index in the jqxRibbon.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span21'>destroy</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Destroys the jqxRibbon widget.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>destroy</code> method.
                        </p>
                        <pre><code>$('#jqxRibbon').jqxRibbon('destroy'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/hk9p3286/">destroys
                                the jqxRibbon.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span16'>selectAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Selects the item with indicated index. Index is a number.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>selectAt</code> method.
                        </p>
                        <p>
                            // @param index - Number
                        </p>
                        <pre><code>$('#jqxRibbon').jqxRibbon('selectAt', 2); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/b5axjtbq/">selects
                                an item in the jqxRibbon</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span17'>clearSelection</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Unselects the selected item and collapses its content.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>clearSelection</code> method.
                        </p>
                        <pre><code>$('#jqxRibbon').jqxRibbon('clearSelection'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/vzpqkqzq/">unselects
                                the selected item in the jqxRibbon</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span18'>disableAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Disables an item by index. Index is a number.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>disableAt</code> method.
                        </p>
                        <p>
                            // @param index - Number
                        </p>
                        <pre><code>$('#jqxRibbon').jqxRibbon('disableAt', 8); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/knfeu2zh/">disables
                                an item in the jqxRibbon</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span22'>enableAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables a disabled item by index. Index is a number.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>enableAt</code> method.
                        </p>
                        <p>
                            // @param index - Number
                        </p>
                        <pre><code>$('#jqxRibbon').jqxRibbon('enableAt', 3); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/jfp8fzpr/">enables
                                an item in the jqxRibbon</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span23'>hideAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Hides an item by index. Index is a number.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>hideAt</code> method.
                        </p>
                        <p>
                            // @param index - Number
                        </p>
                        <pre><code>$('#jqxRibbon').jqxRibbon('hideAt', 2); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/yjj1mhmp/">hides
                                an item in the jqxRibbon</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span24'>showAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Shows an item by index. Index is a number.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>showAt</code> method.
                        </p>
                        <p>
                            // @param index - Number
                        </p>
                        <pre><code>$('#jqxRibbon').jqxRibbon('showAt', 5); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8m7f1qso/">shows
                                item in the jqxRibbon</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span25'>addAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Adds a new item by index.
                        </p>
                        List of parameters:
                        <ul>
                            <li>index - Number;</li>
                            <li>data - Object with the following properties:
                                <ul>
                                    <li>title - String;</li>
                                    <li>content - String.</li>
                                </ul>
                            </li>
                        </ul>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>addAt</code> method.
                        </p>
                        <pre><code>$('#jqxRibbon').jqxRibbon('addAt', 2, { title: "New item", content: "New content" });</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/o5zzspg6/">adds
                                a new item in the jqxRibbon</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>removeAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Removes an item from the ribbon. Index is a number.
                        </p>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>removeAt</code> method.
                        </p>
                        <p>
                            // @param index - Number
                        </p>
                        <pre><code>$('#jqxRibbon').jqxRibbon('removeAt', 2); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/acghLnum/">removes
                                an item in the jqxRibbon</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span28'>updateAt</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Updates an item.
                        </p>
                        <p>
                            <em>Note:</em> after an item has been updated with updateAt, initContent will be
                            called again for that item (if set).</p>
                        List of parameters:
                        <ul>
                            <li>index - Number;</li>
                            <li>newData - Object with the following properties:
                                <ul>
                                    <li>newTitle - String;</li>
                                    <li>newContent - String.</li>
                                </ul>
                            </li>
                        </ul>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>updateAt</code> method.
                        </p>
                        <pre><code>$('#jqxRibbon').jqxRibbon('updateAt', 1, { newTitle: "Updated title", newContent: "Updated content" });</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mhyowh0c/">updates
                                an item in the jqxRibbon</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span29'>setPopupLayout</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the layout of an item's content if mode is set to "popup".
                        </p>
                        List of parameters:
                        <ul>
                            <li>index - Number;</li>
                            <li>layout - String, possible values:
                                <ul>
                                    <li>"default" - the item's content is aligned with the widget's header;</li>
                                    <li>"near" - the item's content is left/top aligned with its title;</li>
                                    <li>"far" - the item's content is right/bottom aligned with its title;</li>
                                    <li>"center" - the item's content is centered under/next to its title.</li>
                                </ul>
                            </li>
                            <li>width - Number/String;</li>
                            <li>height - Number/String.</li>
                        </ul>
                        <h4>
                            Code examples</h4>
                        <p>
                            Invoke the <code>setPopupLayout</code> method.
                        </p>
                        <pre><code>$('#jqxRibbon').jqxRibbon('setPopupLayout', 0, "center", 150, 100); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/xoqzq98d/">sets
                                the layout of items' content in the jqxRibbon</a>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <br />
    </div>
</body>
</html>
